<template>
    <div class="mainBox">
        <!-- <div>
            <el-breadcrumb separator="/">
                <el-breadcrumb-item
                    ><span style="font-size: 14px;"
                        >智提升</span
                    ></el-breadcrumb-item
                >
                <el-breadcrumb-item
                    ><a style="font-weight: 500;font-size: 14px;">{{
                        is_exam_type == 2 ? "考试" : "作业"
                    }}</a></el-breadcrumb-item
                >
                <el-breadcrumb-item>
                    <span style="font-size: 14px;">题目解析</span>
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div> -->
        <div class="title">题目解析</div>

        <!-- <div class="bodyBox">
            <div class="topic"> -->
        <el-card
            class="topic-analysis"
            v-for="(item, index) in lists"
            :key="index"
            shadow="hover"
        >
            <div class="topic-item">
                <div class="div-flex">
                    <div class="topic-item-title">
                        {{ index + 1 }}、<el-tag effect="plain" size="mini">{{
                            item.question_type_name
                        }}</el-tag>
                        <div
                            v-html="item.question_title"
                            style="margin-left:10px; word-wrap: break-word;width: 90%;"
                        ></div>
                    </div>
                    <!-- <div class="topic-item-start">
                            <i
                                style="color: rgb(255,165,68);margin-right: 5px;"
                                class="el-icon-star-off"
                            ></i
                            >标记
                        </div> -->
                </div>
                <template
                    v-if="
                        (item.question_typeid != 3 &&
                            item.is_one_choice == 2) ||
                            item.is_many_choice == 2
                    "
                >
                    <div
                        class="analysis_text"
                        v-for="(val, id) in item.answer_list"
                        :key="id"
                    >
                        <div>{{ val.text }}、</div>
                        <div v-html="val.answer"></div>
                    </div>
                </template>
                <div class="topic-item-answer" v-if="item.is_sub_question == 1">
                    <div class="div-flex-false">
                        <div>你的答案：</div>
                        <div>
                            <template v-if="item.question_typeid == 11">
                                <div>
                                    <image
                                        class="yulanImg firstCanvas"
                                        :src="
                                            'data:image/jpeg;base64,' +
                                                item.myanswer
                                        "
                                        :style="{
                                            background:
                                                'url(' +
                                                item.question_photo +
                                                ') no-repeat'
                                        }"
                                        mode="aspectFit"
                                    ></image>
                                </div>
                            </template>
                            <template v-else>
                                <div>
                                    {{
                                        item.myanswer == "" ||
                                        item.myanswer == "undefined"
                                            ? "没答题"
                                            : item.myanswer
                                    }}
                                </div>
                            </template>
                        </div>
                        <div style="margin-left: 8px;" class="div-flex">
                            <i
                                v-if="item.is_answer == 2"
                                class="el-icon-check"
                                style="color: #18db60;font-size: 22px;margin-left: 3px;"
                            ></i>
                            <i
                                v-else
                                class="el-icon-close"
                                style="color: red;font-size: 22px;margin-left: 3px;"
                            ></i>
                        </div>
                    </div>
                    <div class="div-flex-true">
                        <div>正确答案：</div>
                        <div v-html="item.answer"></div>
                    </div>
                </div>
                <div class="topic-item-analysis">
                    <div class="topic-item-label">答案解析：</div>
                    <div
                        class="analysisMore"
                        v-html="item.question_analysis"
                    ></div>
                </div>
                <div
                    class="checkSub"
                    v-if="item.isShowSubText"
                    @click="checkSub(index)"
                >
                    查看子题
                </div>
                <!-- 子试题答案解析 -->
                <template v-if="item.isShowSub">
                    <div
                        v-for="(item3, index3) in item.sub_question_list"
                        :key="index3"
                        style="margin-top:10px"
                    >
                        <div class="div-flex">
                            <div class="topic-item-title">
                                {{ index3 + 1 }}、<el-tag
                                    effect="plain"
                                    size="mini"
                                    >{{ item3.question_type_name }}</el-tag
                                >
                                <div
                                    v-html="item3.question_title"
                                    style="margin-left:10px; word-wrap: break-word;width: 90%;"
                                ></div>
                            </div>
                            <!-- <div class="topic-item-start">
                            <i
                                style="color: rgb(255,165,68);margin-right: 5px;"
                                class="el-icon-star-off"
                            ></i
                            >标记
                        </div> -->
                        </div>
                        <template
                            v-if="
                                (item3.question_typeid != 3 &&
                                    item3.is_one_choice == 2) ||
                                    item3.is_many_choice == 2
                            "
                        >
                            <div
                                class="analysis_text"
                                v-for="(val1, id1) in item3.answer_list"
                                :key="id1"
                            >
                                <div>{{ val1.text }}、</div>
                                <div v-html="val1.answer"></div>
                            </div>
                        </template>
                        <div
                            class="topic-item-answer"
                            v-if="item3.is_sub_question == 1"
                        >
                            <div class="div-flex-false">
                                <div>你的答案：</div>
                                <div>
                                    <template
                                        v-if="item3.question_typeid == 11"
                                    >
                                        <div>
                                            <image
                                                class="yulanImg firstCanvas"
                                                :src="
                                                    'data:image/jpeg;base64,' +
                                                        item3.myanswer
                                                "
                                                :style="{
                                                    background:
                                                        'url(' +
                                                        item3.question_photo +
                                                        ') no-repeat'
                                                }"
                                                mode="aspectFit"
                                            ></image>
                                        </div>
                                    </template>
                                    <template v-else>
                                        <div>
                                            {{
                                                item3.myanswer == "" ||
                                                item3.myanswer == "undefined"
                                                    ? "没答题"
                                                    : item3.myanswer
                                            }}
                                        </div>
                                    </template>
                                </div>
                                <div style="margin-left: 8px;" class="div-flex">
                                    <i
                                        v-if="item3.is_answer == 2"
                                        class="el-icon-check"
                                        style="color: #18db60;font-size: 22px;margin-left: 3px;"
                                    ></i>
                                    <i
                                        v-else
                                        class="el-icon-close"
                                        style="color: red;font-size: 22px;margin-left: 3px;"
                                    ></i>
                                </div>
                            </div>
                            <div class="div-flex-true">
                                <div>正确答案：</div>
                                <div v-html="item3.answer"></div>
                            </div>
                        </div>
                        <div class="topic-item-analysis">
                            <div class="topic-item-label">答案解析：</div>
                            <div
                                class="analysisMore"
                                v-html="item3.question_analysis"
                            ></div>
                        </div>
                        <el-divider
                            v-if="index3 != item.sub_question_list.length - 1"
                        ></el-divider>
                    </div>
                </template>
                <!-- <el-divider></el-divider> -->
            </div>
        </el-card>

        <!-- </div>
        </div> -->
    </div>
</template>

<script>
import { homeworkAnalysis, ExamAnalysis } from "@/api/test/exam/index";
import util from "@/utils/utilsTools";
import {
    latex_reques,
    latex_answer,
    getAnalysis,
    getTypeName
} from "@/utils/latex";
export default {
    components: {},
    props: {},
    data() {
        return {
            class_log_id: "",
            title: "练习报告",
            is_exam_type: 1,
            // 试题解析列表
            lists: []
        };
    },
    computed: {},
    watch: {},
    beforeCreate() {
        // 生命周期钩子：组件实例刚被创建，组件属性计算之前，如 data 属性等
    },
    created() {
        // 生命周期钩子：组件实例创建完成，属性已绑定，但 DOM 还未生成，el 属性还不存在
        // 初始化渲染页面
    },
    beforeMount() {
        // 生命周期钩子：模板编译/挂载之前
    },
    mounted() {
        // 生命周期钩子：模板编译、挂载之后（此时不保证已在 document 中）
        this.class_log_id = this.$route.query.class_log_id;
        this.is_exam_type = Number(this.$route.query.is_exam_type);
        var data1 = {
            class_log_id: this.class_log_id,
            is_out_html: 2,
            allowable_tags: "<img>"
        };
        if (this.is_exam_type == 2) {
            this.getExamAnalysis(data1);
        } else {
            this.getHomeworkAnalysis(data1);
        }
    },
    methods: {
        getHomeworkAnalysis(data) {
            homeworkAnalysis(data).then(res => {
                if (res.code == 200) {
                    var data = res.data;
                    latex_reques(data.question_lists, "question_title"); //解析 试题标题 latex 公式转换
                    latex_reques(data.question_lists, "question_analysis"); //解析 试题解析 latex 公式转换
                    latex_answer(data.question_lists, "answer_list"); //解析答案选项 latex 公式转换
                    console.log(data);
                    this.getList(data);
                } else {
                    this.$message.error(res.msg);
                }
            });
        },
        getExamAnalysis(data) {
            ExamAnalysis(data).then(res => {
                if (res.code == 200) {
                    var data = res.data;
                    latex_reques(data.question_lists, "question_title"); //解析 试题标题 latex 公式转换
                    latex_reques(data.question_lists, "question_analysis"); //解析 试题解析 latex 公式转换
                    latex_answer(data.question_lists, "answer_list"); //解析答案选项 latex 公式转换
                    console.log(data);
                    this.getList(data);
                } else {
                    this.$message.error(res.msg);
                }
            });
        },
        getList(data) {
            var questionList = data.question_lists;
            for (let i = 0; i < questionList.length; i++) {
                questionList[i].interest_lists_log =
                    questionList[i].exam_answer_log;
                if (questionList[i].is_sub_question == 2) {
                    for (
                        let l = 0;
                        l < questionList[i].sub_question_list.length;
                        l++
                    ) {
                        questionList[i].sub_question_list[
                            l
                        ].interest_lists_log =
                            questionList[i].sub_question_list[
                                l
                            ].exam_answer_log;
                    }
                }
            }

            this.lists = getAnalysis(questionList);
            for (let j = 0; j < this.lists.length; j++) {
                this.lists[j].isShowSub = false; //查看子题
                this.lists[j].is_check = false;
                if (this.lists[j].is_favorite == 1) {
                    this.lists[j].is_check = true;
                }
                this.lists[j].question_type = getTypeName(
                    this.lists[j].question_typeid
                );
                this.lists[j].section_data.gradeName = util.getgradeName(
                    this.lists[j].section_data.grade
                );
                if (this.lists[j].is_sub_question == 2) {
                    this.lists[j].isShowSubText = true; //查看子题文字
                    latex_reques(
                        this.lists[j].sub_question_list,
                        "question_title"
                    );
                    latex_reques(
                        this.lists[j].sub_question_list,
                        "question_analysis"
                    ); //解析 试题解析 latex 公式转换
                    latex_answer(
                        this.lists[j].sub_question_list,
                        "answer_list"
                    ); //解析答案选项 latex 公式转换
                    this.lists[j].sub_question_list = getAnalysis(
                        this.lists[j].sub_question_list,
                        "interest_lists_log"
                    );
                    for (
                        let k = 0;
                        k < this.lists[j].sub_question_list.length;
                        k++
                    ) {
                        if (
                            this.lists[j].sub_question_list[k].is_favorite == 1
                        ) {
                            this.lists[j].sub_question_list[k].is_check = true;
                        }
                        this.lists[j].sub_question_list[
                            k
                        ].question_type_name = getTypeName(
                            this.lists[j].sub_question_list[k].question_typeid
                        );
                        // this.lists[j].sub_question_list[
                        //     k
                        // ].section_data.gradeName = util.getgradeName(
                        //     this.lists[j].sub_question_list[k].section_data
                        //         .grade
                        // );
                    }
                }
            }
            console.log("试题分析列表", this.lists);
            this.$forceUpdate();
        },
        // 查看子试题
        checkSub(index) {
            this.lists[index].isShowSub = true;
            this.lists[index].isShowSubText = false;
            this.$forceUpdate();
            console.log("答案解析列表", this.lists[index]);
        }
    }
};
</script>

<style lang="scss" scoped>
.mainBox {
    width: 100%;
    padding: 26px;
    box-sizing: border-box;
    .title {
        font-size: 20px;
        color: #2d3440;
        margin-top: 20px;
        margin-bottom: 20px;
    }
}
.bodyBox {
    width: 100%;
    border-radius: 8px;
    background-color: #ffffff;
    position: relative;
    padding: 30px 48px 30px 48px;
    box-sizing: border-box;
}
.titleImg {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    box-shadow: 0 10px 10px #eeeeee;
    overflow: hidden;
    position: absolute;
    left: 50%;
    top: -40px;
    transform: translateX(-50%);
    img {
        width: 160px;
        height: 160px;
    }
}
.fractionBox {
    padding-top: 140px;
    width: 300px;
    margin: 0 auto;
    text-align: center;
    padding-left: 20px;
    position: relative;
}
.fractionNum {
    font-size: 68px;
    font-weight: bold;
    color: #18db60;
}
.fractionNum1 {
    font-size: 68px;
    font-weight: bold;
    color: #f25427;
}
.rightOk {
    width: 31px;
    height: 31px;
    position: absolute;
    right: -20px;
    top: 150px;
}
.leftStart {
    width: 24px;
    height: 24px;
    position: absolute;
    left: -20px;
    top: 190px;
}
.thankText {
    text-align: center;
    font-size: 22px;
    font-weight: 500;
    color: #2d3440;
    margin-top: 15px;
}
.thankText1 {
    text-align: center;
    font-size: 22px;
    font-weight: 500;
    color: #2d3440;
    margin-top: 15px;
}
.percentage {
    font-size: 34px;
    font-weight: 500;
    // color: #18db60;
    margin-top: 15px;
    text-align: center;
}
.percentage1 {
    font-size: 34px;
    font-weight: 500;
    color: #f25427;
    margin-top: 15px;
    text-align: center;
}
.correctRow {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 15px;
    img {
        width: 25px;
        height: 25px;
        margin-right: 5px;
    }
}
.correctText {
    font-size: 22px;
    font-weight: 500;
    color: #2d3440;
}
.analysisTitle {
    margin-top: 47px;
    display: flex;
    justify-content: space-between;
}
.selectBtnGround {
    display: flex;
}
.analysisBtnGround {
    display: flex;
}
.switchBtn {
    display: flex;
    width: 210px;
    height: 40px;
    line-height: 40px;
    border: 1px solid #018854;
    border-radius: 80px;
    margin-right: 10px;
    div {
        width: 105px;
        text-align: center;
        font-size: 14px;
        color: #2d3440;
        cursor: pointer;
    }
}
.isSwicth {
    background: #018854;
    border: 1px solid #018854;
    border-radius: 80px;
    color: #ffffff !important;
}
.analysisBtn1 {
    width: 30%;
    height: 40px;
    line-height: 40px;
    background: #f25427;
    border-radius: 20px;
    font-size: 16px;
    color: #ffffff;
    text-align: center;
    cursor: pointer;
    margin-right: 10px;
}
.analysisBtn2 {
    width: 132px;
    height: 40px;
    line-height: 40px;
    background: #ffa442;
    border-radius: 20px;
    font-size: 16px;
    color: #ffffff;
    text-align: center;
    cursor: pointer;
}
.analysisBtn3 {
    width: 132px;
    height: 40px;
    line-height: 40px;
    color: #ffffff;
    background: #ffa442;
    font-size: 16px;
    border-radius: 20px;
    text-align: center;
    cursor: pointer;
}
.analysisTitle2 {
    margin-top: 47px;
    display: flex;
}
.analysisTitleText {
    font-size: 22px;
    font-weight: 500;
    color: #2d3440;
    margin-right: 47px;
}
.boxState {
    display: flex;
    align-items: center;
    div {
        margin: 0 5px;
        font-size: 12px;
        color: #9ea4b0;
    }
}
.correctBox {
    width: 14px;
    height: 14px;
    background: #18db60;
    border: 1px solid #18db60;
}
.errBox {
    width: 16px;
    height: 16px;
    background: #f25427;
    border-radius: 2px;
}
.errBox1 {
    width: 16px;
    height: 16px;
    background: #ffa442;
    border-radius: 2px;
}
.indexItemBox {
    display: flex;
    flex-wrap: wrap;
    width: 80%;
}
.itemBoxIsTrue {
    width: 38px;
    height: 38px;
    line-height: 38px;
    background: #18db60;
    border: 1px solid #18db60;
    border-radius: 2px;
    text-align: center;
    color: #ffffff;
    margin: 5px;
}
.itemBoxIsFalse {
    width: 38px;
    height: 38px;
    line-height: 38px;
    background: #f25427;
    border: 1px solid #f25427;
    border-radius: 2px;
    text-align: center;
    color: #ffffff;
    margin: 5px;
}
.itemBoxIsFalse1 {
    width: 38px;
    height: 38px;
    line-height: 38px;
    background: #ffa442;
    border: 1px solid #ffa442;
    border-radius: 2px;
    text-align: center;
    color: #ffffff;
    margin: 5px;
}
.time {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}
.startTime {
    display: flex;
    align-items: center;
    font-size: 18px;
}
.endTime {
    font-size: 16px;
    margin-top: 10px;
}
.bottomBtn {
    margin-top: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.backBtn {
    width: 30%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: #018854;
    border-radius: 20px;
    color: #ffffff;
    cursor: pointer;
    margin-left: 70px;
}
/* 错题 */
.topic {
    margin-bottom: 24px;
    .topic-item {
        background: #fff;
        border-radius: 8px;
        padding: 16px;
        box-sizing: border-box;
    }
}
.topic-item {
    .topic-item-title {
        font-size: 16px;
        color: #707070;
        word-wrap: break-word;
        width: 100%;
        display: flex;
    }
    .topic-item-answer {
        margin: 10px 0px;
    }
    .div-flex-false {
        display: flex;
        align-items: center;
        color: #707070;
        font-size: 14px;
    }
    .div-flex-true {
        display: flex;
        align-items: center;
        margin-top: 10px;
        font-size: 14px;
        color: #18db60;
    }
    .topic-item-analysis {
        width: 45%;
    }
    .topic-item-label {
        color: #707070;
        font-weight: 550;
        margin-bottom: 8px;
    }
}
.div-flex {
    display: flex;
    align-items: center;
    .topic-item-mark {
        font-size: 16px;
        color: #707070;
    }
    .topic-item-start {
        font-size: 14px;
        color: #9ea4b0;
        width: 66px;
        height: 20px;
        line-height: 20px;
        background: #ffffff;
        text-align: center;
        border: 1px solid #9ea4b0;
        box-sizing: border-box;
        cursor: pointer;
        border-radius: 3px;
    }
}
.analysis_text {
    font-size: 14px;
    margin-top: 10px;
    color: #707070;
    display: flex;
}
.checkSub {
    width: 100%;
    text-align: right;
    font-size: 18px;
    color: #18db60;
    cursor: pointer;
}
// 填空题类型
.resultListType {
    font-size: 18px;
    margin-top: 20px;
    margin-bottom: 10px;
    color: #999999;
}
</style>
